<template>
  <div>
    <h1>动态组件</h1>
      <!-- vue的内置组件  动态组件
       :is="注册组件起的名字" 根据组件的名字来动态加载组件 -->
       <button @click="componetName='cateOne'">第一个</button>
      <button  @click="componetName='cateTwo'">第二个</button>
    <!-- 缓存组件 keepAlive  用来包裹动态产生组件
      component和router-view
       -->
      <!-- keepAlive 有俩个属性
       后面放的是 组件的name的集合
       include白名单 可以缓存的组件
       exclude 黑名单  不缓存的组件 -->
      <keep-alive exclude="catetwo,catefive,catesix" >
          <component :is="componetName"></component>
      </keep-alive>
    
      
  </div>
</template>
<script>
import cateOne from './child/cateOne.vue' 
import cateTwo from './child/cateTwo.vue'

export default {
  data(){
    return {
      componetName:"" //要加载的组件名

    }
  },
   components:{cateOne,cateTwo} //注册组件起的名字
}
</script>